<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var btns = document.getElementsByTagName("button");
				//var checkboxs = document.getElementsByTagName("ul input");
				var checkboxs = document.getElementsByTagName("input");
				//全选
				/*btns[0].onclick = function() {
					for (var i = 0; i < checkboxs.length; i++) {
						checkboxs[i].checked = true;
					}
				}
				btns[1].onclick = function() {
					for (var i = 0; i < checkboxs.length; i++) {
						checkboxs[i].checked = false;
					}
				}*/
				btns[0].onclick = function() {
					onCheckAll(true);
				};
				btns[1].onclick = function() {
					onCheckAll(false);
				};

				function onCheckAll(isChecked) {
					for (var i = 0; i < checkboxs.length; i++) {
						checkboxs[i].checked = isChecked;
					}
				}
				
				btns[2].onclick = function() {
					for (var i = 0; i < checkboxs.length; i++) {
						//checkboxs[i].checked == true ? checkboxs[i].checked = false : checkboxs[i].checked = true; 
						var checkedStatus = checkboxs[i].checked;
						checkboxs[i].checked = !checkedStatus;
					}
				};
			}
			
		</script>
	</head>
	<body>
		<div id="">
			<button>全选</button>
			<button>取消</button>
			<button>反选</button>
		</div>
		<div>
			<ul>
				<li><input type="checkbox"/></li>
				<li><input type="checkbox"/></li>
				<li><input type="checkbox"/></li>
				<li><input type="checkbox"/></li>
				<li><input type="checkbox"/></li>
				<li><input type="checkbox"/></li>
				<li><input type="checkbox"/></li>
				<li><input type="checkbox"/></li>
			</ul>
		</div>
	</body>
</html>
